import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import "./Security.css";
import ReactPlayer from "react-player";
import ImageSplit from "./Imgae";

function Security() {
  return (
    <div className="Home">
      <header>
        <img src="../public/images/Top.png" alt="" />
      </header>
      <main>
        <div className="m-Left">
          <div className="m-l-Top">
            <div className="l-t-top">监控情况</div>
            <div className="l-t-bottom">
              <dl>
                <dt>
                  <ImageSplit
                    src="/public/images/Photo／背景／地球.png" // 替换为你的图片URL
                  />
                </dt>
                <dd>
                  <p>一号楼</p>
                  <p>
                    正常数量：<span>107</span>
                  </p>
                </dd>
                <dd>
                  <p>
                    设备数量：<span>130</span>
                  </p>
                  <p>
                    故障数量：<span className="s1">23</span>
                  </p>
                </dd>
              </dl>
              <dl>
                <dt>
                  <ImageSplit
                    src="/public/images/Photo／背景／地球.png" // 替换为你的图片URL
                  />
                </dt>
                <dd>
                  <p>二号楼</p>
                  <p>
                    正常数量：<span>107</span>
                  </p>
                </dd>
                <dd>
                  <p>
                    设备数量：<span>130</span>
                  </p>
                  <p>
                    故障数量：<span className="s1">23</span>
                  </p>
                </dd>
              </dl>
              <dl>
                <dt>
                  <ImageSplit
                    src="/public/images/Photo／背景／地球.png" // 替换为你的图片URL
                  />
                </dt>
                <dd>
                  <p>三号楼</p>
                  <p>
                    正常数量：<span>107</span>
                  </p>
                </dd>
                <dd>
                  <p>
                    设备数量：<span>130</span>
                  </p>
                  <p>
                    故障数量：<span className="s1">23</span>
                  </p>
                </dd>
              </dl>
            </div>
          </div>
          <div className="m-l-Canter">
            <div className="l-c-top">门禁情况</div>
            <div className="l-c-bottom">
              <img src="../../../public/images/安防管理-中.png" alt="" />
            </div>
          </div>
          <div className="m-l-Bottom">
            <div className="l-b-top">值班情况</div>
            <div className="l-b-bottom">
              <img src="../../../public/images/安防设备-下.png" alt="" />
            </div>
          </div>
        </div>
        <div className="m-Canter">
          {/* 校园路线规划导航任务工单 */}
          <div className="images">
            <iframe
              src="https://api.bimface.com/preview/e6fbbd29?viewid=1244"
              frameBorder="0"
              style={{ width: "600px", height: "600px" }}
            ></iframe>
          </div>
          <footer>
            <dl>
              <dt>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1df7f0ff25e5271b42b58cbdbc2ff8be66fdbd6d68dfdd40f4978b308e261b05"
                  alt=""
                />
              </dt>
              <dd>
                <Link className="dd1" to={"/"}>
                  智能检测
                </Link>
              </dd>
            </dl>
            <dl>
              <dt>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4ce04898f7dd6a02dfcf4ed394c316356fe39dc2ac66531bb7bccca6d2c30dfb"
                  alt=""
                />
              </dt>
              <dd>
                <Link className="dd1" to={"/Obtain"}>
                  就业态势
                </Link>
              </dd>
            </dl>
            <dl>
              <dt>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge088a7d077a0428e4786170992b2aea25a499a52d74c9eafc3a9cbd2567fc294"
                  alt=""
                />
              </dt>
              <dd>
                <Link className="dd1" to={"/Security"}>
                  安防管理
                </Link>
              </dd>
            </dl>
            <dl>
              <dt>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9b28ec4ea1957dcd2e78b4ac6cb6c08234bef6c2198a86921418d393d00a88ce"
                  alt=""
                />
              </dt>
              <dd>
                <Link className="dd1" to={"/Device"}>
                  设备运维
                </Link>
              </dd>
            </dl>
          </footer>
        </div>
        <div className="m-Right">
          <div className="m-r-f">
            <div className="r-t-top">
              <p>监控画面</p>
            </div>
            <div className="r-t-bottom">
              <div className="border-box-content">
                <ReactPlayer
                  url="../../../public/image/a601bd01f96e1dba07200cdc4b87cf07.mp4"
                  controls
                  width="100%"
                  height="100%"
                />
              </div>
              <div>
                <ReactPlayer
                  url="https://example.com/video.mp4"
                  controls
                  width="100%"
                  height="100%"
                />
              </div>
              <div>
                <ReactPlayer
                  url="https://example.com/video.mp4"
                  controls
                  width="100%"
                  height="100%"
                />
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}
export default Security;
